<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 关键修复：CSRF令牌注入 -->
    <meta name="_csrf" th:content="${_csrf.token}" th:if="${_csrf}" />
    <meta name="_csrf_header" th:content="${_csrf.headerName}" th:if="${_csrf}" />
    <title>文件列表</title>
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/font-awesome.min.css}" rel="stylesheet">
    <style>
        /* 原有样式保持不变 */
        .file-icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .btn-group-xs > .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        .file-type-badge {
            font-size: 0.75rem;
            padding: 0.2em 0.4em;
        }
        @media (max-width: 768px) {
            .hidden-mobile { display: none; }
        }

        /* 新增错误提示样式 */
        .config-error-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f8d7da;
            color: #721c24;
            padding: 15px;
            text-align: center;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
<!-- 安全配置错误提示横幅 -->
<div id="configErrorBanner" class="config-error-banner" style="display: none;">
    <strong>安全配置错误：</strong>
    <span id="errorDetails">CSRF令牌缺失，请联系管理员</span>
    <button class="btn btn-sm btn-danger ml-2" onclick="document.getElementById('configErrorBanner').style.display='none'">
        忽略
    </button>
</div>

<div class="container-fluid mt-4">
    <div class="card shadow">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">文件列表</h5>
            <button id="uploadTrigger" class="btn btn-light btn-sm">
                <i class="fa fa-upload"></i> 上传文件
            </button>
            <input type="file" id="fileUploadInput" multiple style="display:none">
        </div>

        <div class="card-body">
            <table class="table table-hover" id="fileTable">
                <thead class="thead-light">
                <tr>
                    <th width="5%"></th>
                    <th>文件名</th>
                    <th class="hidden-mobile">类型</th>
                    <th class="hidden-mobile">大小</th>
                    <th class="hidden-mobile">修改时间</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="file : ${fileList}" th:with="fileSize=${file.fileSize ?: 0}">
                    <td>
                        <img th:src="@{/assets/icons/{type}.png(type=${#strings.toLowerCase(file.fileType)})}"
                             class="file-icon"
                             onerror="this.src='/assets/icons/default.png'">
                    </td>
                    <td>
                        <span th:text="${file.fileName}"></span>
                        <span class="badge file-type-badge"
                              th:classappend="${#strings.toLowerCase(file.fileType)} == 'mp4' ? 'bg-danger' :
                                                      ${#strings.toLowerCase(file.fileType)} == 'pdf' ? 'bg-warning' :
                                                      ${#strings.toLowerCase(file.fileType)} == 'doc' ? 'bg-primary' : 'bg-secondary'"
                              th:text="${file.fileType}">
                                </span>
                    </td>
                    <td class="hidden-mobile" th:text="${file.fileType}"></td>
                    <td class="hidden-mobile">
                        <span th:if="${fileSize < 1024}" th:text="${fileSize} + ' B'"></span>
                        <span th:if="${fileSize >= 1024 and fileSize < 1048576}"
                              th:text="${#numbers.formatDecimal(fileSize/1024, 1, 2)} + ' KB'"></span>
                        <span th:if="${fileSize >= 1048576}"
                              th:text="${#numbers.formatDecimal(fileSize/1048576, 1, 2)} + ' MB'"></span>
                    </td>
                    <td class="hidden-mobile" th:text="${file.modifyTime ? #dates.format(file.modifyTime, 'yyyy-MM-dd HH:mm') : 'N/A'}"></td>
                    <td>
                        <div class="btn-group btn-group-xs">
                            <a th:if="${file.fileType.equals('mp4') || file.fileType.equals('mp3')}"
                               class="btn btn-info"
                               th:href="@{'/media/play/' + ${file.fileUuid}}"
                               target="_blank">
                                <i class="fa fa-play"></i>
                            </a>
                            <a class="btn btn-success"
                               th:href="@{'/file/download/' + ${file.fileUuid} + '?token=' + ${#request.getAttribute('_csrf').getToken()}}">
                                <i class="fa fa-download"></i>
                            </a>
                            <a th:if="${file.fileType.equals('jpg') || file.fileType.equals('png') || file.fileType.equals('pdf')}"
                               class="btn btn-primary"
                               th:href="@{'/file/preview/' + ${file.fileUuid}}"
                               target="_blank">
                                <i class="fa fa-eye"></i>
                            </a>
                            <button class="btn btn-danger"
                                    th:data-uuid="${file.fileUuid}"
                                    onclick="deleteFile(this)">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <div class="card-footer" th:with="cp=${currentPage ?: 1}, tp=${totalPages ?: 1}">
            <nav>
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${cp == 1} ? 'disabled'">
                        <a class="page-link" th:href="@{/file/fileAll(page=1)}">首页</a>
                    </li>
                    <li class="page-item" th:classappend="${cp == 1} ? 'disabled'">
                        <a class="page-link" th:href="@{/file/fileAll(page=${cp - 1})}">上一页</a>
                    </li>
                    <li th:each="page : ${#numbers.sequence(1, tp)}"
                        class="page-item" th:classappend="${cp == page} ? 'active'">
                        <a class="page-link" th:href="@{/file/fileAll(page=${page})}" th:text="${page}"></a>
                    </li>
                    <li class="page-item" th:classappend="${cp == tp} ? 'disabled'">
                        <a class="page-link" th:href="@{/file/fileAll(page=${cp + 1})}">下一页</a>
                    </li>
                    <li class="page-item" th:classappend="${cp == tp} ? 'disabled'">
                        <a class="page-link" th:href="@{/file/fileAll(page=${tp})}">尾页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>